import Vue from 'vue'
import VueRouter from 'vue-router'
import ManageView from '../views/Home.vue'
import request from "@/utils/request";

Vue.use(VueRouter)

//解决报错 Navigation cancelled from "/" to "/movie" with a new navigation.
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
};


const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta:{
      title:'首页',
      authRequired: true
    },
    children: [
      {
        path: 'movie',
        name: 'Movie',
        component: () => import("../views/Movie.vue"),
        meta:{
          title:'电影'
        }
      },
      {
        path: 'user',
        name: 'User',
        component: () => import("../views/User.vue"),
        meta:{
          title:'用户'
        }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta:{
      title:'登录页面'
    }
  },
  {
    path: '/index',
    name: 'Index',
    component: () => import('../views/Index.vue')
  },
  {
    path: '/detail',
    name: 'Detail',
    component: () => import('../views/Detail.vue')
  },
  {
    path: '/movieList',
    name: 'MovieList',
    component: () => import('../views/MovieList.vue')
  },
  {
    path: '/movieHistory',
    name: 'MovieHistory',
    component: () => import('../views/MovieHistory.vue')
  },
  {
    path: '/allMovies',
    name: 'AllMovies',
    component: () => import('../views/AllMovies.vue')
  },
  {
    path: '/community',
    name: 'Community',
    component: () => import('../views/Community.vue')
  }
]

const router = new VueRouter({
  // mode: 'history',
  mode: 'hash',
  // base: '/admin/', //配置nginx访问结构
  base: process.env.BASE_URL,
  routes
})

// router.onError((error) => {
//   const pattern = /Loading chunk (\d)+ failed/g;
//   const isChunkLoadFailed = error.message.match(pattern);
//   if(isChunkLoadFailed){
//     // 用路由的replace方法，并没有相当于F5刷新页面，失败的js文件并没有从新请求，会导致一直尝试replace页面导致死循环，而用 location.reload 方法，相当于触发F5刷新页面，虽然用户体验上来说会有刷新加载察觉，但不会导致页面卡死及死循环，从而曲线救国解决该问题
//     location.reload();
//     // const targetPath = $router.history.pending.fullPath;
//     // $router.replace(targetPath);
//   }
//
// });

// 导航=跳转 导航守卫，在每一次跳转之前调用
// 这里只能校验有没有token，不能检验正确性，所以在登录之后，人为篡改token，重新访问页面，仍然会显示一瞬间的登录后页面，
// 然后进入request.js 访问接口时才能检验token正确性，然后跳回登录页面
router.beforeEach((to,from,next)=>{
  const isAuthenticated = localStorage.getItem('Token')
  // console.log(to.name)
  //第一个if只能检验有无token
  if (to.name !== 'Login' && !isAuthenticated && to.name !=='Index' && to.name !=='Detail' && to.name !=='MovieList' && to.name!=='MovieHistory' && to.name !=='AllMovies' && to.name !== 'Community') {
    // console.log(to.name)
    next({name: 'Login' })
  }else {
    //发送一个空请求，用后台登录拦截器验证token是否过期
    // request.get("/user/validateToken")
    localStorage.setItem("currentPathName",to.name) //设置当前的路由名称
    next()
  }
  next()
})

export default router
